import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom';
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ],
  }

  pushShow = (id, title) => {
    this.props.history.push(`/home/message/detail/${id}/${title}`);
  }

  replaceShow = (id, title) => {
    this.props.history.replace(`/home/message/detail/${id}/${title}`);
  }

  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {
            messageArr.map((message) => {
              return (
                <li key={message.id}>
                  {/* 向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${message.id}/${message.title}`}>{message.title}</Link>
                  <button onClick={() => { this.pushShow(message.id, message.title) }}>push查看</button>
                  <button onClick={() => { this.replaceShow(message.id, message.title) }}>replace查看</button>
                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail/?id=${message.id}&title=${message.title}`}>{message.title}</Link> */}

                  {/* 向路由组件组件传递state参数：优势不会把东西放到地址栏中 */}
                  {/* <Link to={{ pathname: "/home/message/detail", state: { id: message.id, title: message.title } }}>{message.title}</Link> */}
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/* params参数需要占位接收 */}
        <Route path="/home/message/detail/:id/:title" component={Detail} />

        {/* 接收search参数，无需声明接收 */}
        {/* <Route path="/home/message/detail/" component={Detail} /> */}

        {/* 接收state参数，无需声明接收 */}
        {/* <Route path="/home/message/detail/" component={Detail} /> */}

      </div>
    )
  }
}
